<template>
    <div class="main">
      <el-table
        :data="memberTypes"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="mttype"
          label="会员类型"
          width="120">
        </el-table-column>
        <el-table-column
          prop="mtbegintime"
          label="开通时间">
        </el-table-column>

        <el-table-column
          prop="mtendtime"
          label="过期时间">
        </el-table-column>
        <el-table-column
          prop="mtdesc"
          label="会员类型描述">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEditMemberType(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDeleteMemberType(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageInfo.pageSize"
          layout="prev, pager, next, jumper"
          :total="pageInfo.itemCount">
        </el-pagination>
      </div>
      <el-button size="mini" @click="handleAddMemberType">
        新增
      </el-button>
      <addMemberType v-if="addDialogIsShow" ref="showAddMemberType"></addMemberType>
      <editMemberType v-if="editDialogIsShow" ref="showEditMemberType"></editMemberType>
      <deleteMemberType v-if="deleteDialogIsShow" ref="showdeleteMemberType"></deleteMemberType>


    </div>
</template>

<script>
  import api from "../../../../axios/api"
  import addMemberType from '@/components/back/memberType/addMemberType.vue'
  import editMemberType from '@/components/back/memberType/editMemberType.vue'
  import deleteMemberType from '@/components/back/memberType/deleteMemberType.vue'
  import utilsFd from "../../../../static/js/utils";
    export default {
        name: "index",
        addDialogIsShow:false,
        editDialogIsShow:false,
      components:{
         addMemberType,editMemberType,deleteMemberType
      },
      data(){
          return {
            memberTypes:[],
            addDialogIsShow:false,
            editDialogIsShow:false,
            deleteDialogIsShow:false,
            currentPage: 1,
            pageInfo:{}
          }
      },
      methods: {
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.currentPage = val;
          this.setDataFromAxios(val);
        },
        getImgUrl: function (uimg) {
          return  this.$store.state.host + "/upload/images/memberType/" + uimg;
        },
        tableRowClassName({row, rowIndex}) {
          if (rowIndex % 2 == 0) {
            return 'warning-row';
          } else {
            return '';
          }
          return '';
        },
        setDataFromAxios: function (currPage) {
          if(currPage!=null){
            this.currentPage = currPage;
          }
          //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
          api.setDataFromAxios("/api/memberTypes/pageInfo?currPage="+this.currentPage+"&pageSize=5", null, "get")
            .then(res => {
              console.log(res)
              this.memberTypes = res.tList;
              this.pageInfo = res.obj;
              this.procesDate();
            });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
        },
        procesDate() {
       //   var date = new Date(date)
          //console.log(date)
          //date  = utilsFd.FD.Fd().format(date)
          for(var index = 0;index < this.memberTypes.length;index++){

            this.memberTypes[index].mtbegintime = utilsFd.FD.Fd().format( new Date(this.memberTypes[index].mtbegintime));
            this.memberTypes[index].mtendtime = utilsFd.FD.Fd().format( new Date(this.memberTypes[index].mtendtime));
          }

        },

        handleEditMemberType:function(index,memberType){
          console.log(index + "   "+ memberType.uId);
          let _this = this;   //this代表方法调用者 this代表vue对象
          _this.editDialogIsShow = true;
          _this.$nextTick(() => {  //下一步操作
            _this.$refs.showEditMemberType.init(memberType);  //找到vue对象中定义ref集合（$refs就是ref集合 上面ref定义的名字叫showAddMemberType）调用子组件的init方法
          })
        },

        handleAddMemberType:function(){
          let _this = this;   //this代表方法调用者 this代表vue对象
          _this.addDialogIsShow = true;
          _this.$nextTick(() => {  //下一步操作
            _this.$refs.showAddMemberType.init();  //找到vue对象中定义ref集合（$refs就是ref集合 上面ref定义的名字叫showAddMemberType）调用子组件的init方法
          })
        },
        handleDeleteMemberType: function (index, memberType) {
          let _this = this;
          _this.deleteDialogIsShow = true;
          _this.$nextTick(() => {
            _this.$refs.showdeleteMemberType.init(memberType);
          })
        }

      },
      created:function () {
        this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
      }
    }
</script>

<style scoped lang="stylus">



  .main
    width 1000px
    margin 0 auto
  /deep/ .warning-row  /*不写deep渲染出错*/
    background-color oldlace

</style>
